---
import BaseLayout from "../layouts/BaseLayout.astro"
---

<BaseLayout childpage backtotop>
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <div class="d-flex align-items-center justify-content-center">
          <div style="width: 400px;max-width: 100%;margin-top: 12vh;">
            <h2 class="text-center">adminlts</h2>
            <p class="text-secondary text-center">
              基于bootstrap5设计的后台管理模板系统
            </p>
            <form id="form" class="form">
              <div class="mb-3">
                <div class="input-group">
                  <span class="input-group-text bg-white"
                    ><i class="bi bi-person"></i></span
                  >
                  <input
                    type="text"
                    class="form-control"
                    placeholder="请输入用户"
                    name="username"
                    id="username"
                    aria-label="username"
                  />
                </div>
              </div>
              <div class="mb-3">
                <div class="input-group">
                  <span class="input-group-text bg-white"
                    ><i class="bi bi-person-lock"></i></span
                  >
                  <input
                    type="password"
                    class="form-control"
                    placeholder="请输入密码"
                    name="password"
                    autocomplete="off"
                    id="password"
                    aria-label="password"
                  />
                  <span
                    class="input-group-text bg-white lts-cursor-pointer"
                    data-lts-toggle="passwordtoggle"
                    data-target='input[name="password"]'
                    ><i class="bi bi-eye-slash"></i></span
                  >
                </div>
              </div>

              <div class="mb-3">
                <div class="input-group">
                  <span class="input-group-text bg-white"
                    ><i class="bi bi-shield-lock"></i></span
                  >
                  <input
                    type="text"
                    class="form-control"
                    id="captcha"
                    name="captcha"
                    aria-label="captcha"
                    placeholder="请输入验证码"
                    style="min-width: 80px"
                  />
                  <img
                    src="img/captcha.gif"
                    alt="验证码"
                    class="lts-cursor-pointer"
                    style="height: 38px;width: 120px"
                  />
                </div>
              </div>

              <div
                class="mb-3 d-flex align-items-center justify-content-between flex-wrap gap-3"
              >
                <div class="form-check">
                  <input
                    type="checkbox"
                    class="form-check-input"
                    id="exampleCheck1"
                    name="remember"
                    value="1"
                  />
                  <label class="form-check-label" for="exampleCheck1"
                    >十天内免登录</label
                  >
                </div>
                <a href="javascript:" class="link-success text-decoration-none"
                  >忘记密码?</a
                >
              </div>

              <div class="d-grid gap-2">
                <button class="btn btn-outline-success" type="submit"
                  ><i class="bi bi-box-arrow-in-right"></i> 登录</button
                >
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script
    is:inline
    slot="script"
    src="https://cdn.jsdelivr.net/gh/ajiho/formvalidation@main/dist/js/formValidation.js"
  ></script>
  <script
    is:inline
    slot="script"
    src="https://cdn.jsdelivr.net/gh/ajiho/formvalidation@main/dist/js/framework/bootstrap.js"
  ></script>
  <script
    is:inline
    slot="script"
    src="https://cdn.jsdelivr.net/gh/ajiho/formvalidation@main/dist/js/language/zh_CN.js"
  ></script>

  <script is:inline slot="js">
    //清理掉quicktab的本地缓存
    bootstrapadmin.util.quicktabCacheClear()

    //前端表单验证
    $("#form")
      .formValidation({
        fields: {
          username: {
            validators: {
              notEmpty: true,
            },
          },
          password: {
            validators: {
              notEmpty: true,
            },
          },
          captcha: {
            validators: {
              notEmpty: true,
            },
          },
        },
      })
      .on("success.form.fv", function (event) {
        //阻止表单提交
        event.preventDefault()

        //得到表单对象
        const $form = $(event.target)
        //获取数据
        const data = $form.serialize()

        //发起ajax请求
        $.ajax({
          method: "post",
          url: "/login",
          //表单数据
          data: data,
        }).then((response) => {
          if (response.code === 200) {
            $.toasts.success("登录成功", () => location.replace("index.html"))
          }
        })
      })
  </script>
</BaseLayout>
